import React, { useState, useEffect } from 'react';
import './statistics.less';
import { host } from '../utils/utils';
import {
    Table,
    Image,
    Statistic,
    DatePicker,
    Space,
    Row,
    Col,
    Button,
    Card,
} from 'antd';
import { request } from 'umi';
import { Column } from '@ant-design/charts';
import moment from 'moment';
import 'moment/locale/zh-cn';
import locale from 'antd/es/date-picker/locale/zh_CN';
const { RangePicker } = DatePicker;

const Statistics = () => {
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [statisticsData, setStatisticsData] = useState({});
    const [loading, setloading] = useState(false);
    const [saveId, setSaveId] = useState(0);
    const [pageData, setPageData] = useState({
        pageSize: 10,
        current: 1,
        total: 0,
    });

    const columns = [
        {
            title: '序号',
            dataIndex: 'id',
            key: 'id',
            wdith: 80,
        },
        {
            title: '关键字',
            dataIndex: 'keyword',
            key: 'keyword',
            wdith: 300,
        },
        {
            title: '微信昵称',
            dataIndex: 'user_name',
            key: 'user_name',
        },
        {
            title: '微信头像',
            key: 'head_pic',
            dataIndex: 'head_pic',
            width: 110,
            render: (text, record) => {
                return (
                    <Image.PreviewGroup>
                        <Image width={100} height={100} src={text} />
                    </Image.PreviewGroup>
                );
            },
        },
        {
            title: '发送时间',
            key: 'create_time',
            dataIndex: 'create_time',
        },
    ];

    const getList = (page) => {
        request(`${host}/v1.0/api/index/statistics`, {
            method: 'get',
        }).then((res) => {
            if (res.code == 200) {
                setStatisticsData({
                    user_number: res.data.user_number,
                    key_number: res.data.key_number,
                    list: res.data.list,
                });
            }
        });
    };

    useEffect(() => {
        getList(1);
    }, []);

    var config = {
        data: statisticsData.list ? statisticsData.list : [],
        xField: 'time',
        yField: 'number',
        label: {
            position: 'middle',
            style: {
                fill: '#FFFFFF',
                opacity: 0.6,
            },
        },
        meta: {
            time: { alias: '日期' },
            number: { alias: '数量' },
        },
    };

    return (
        <div className="statistics">
            <Row gutter={[16, 16]}>
                <Col span={6}>
                    <Card title="智能回复数量">
                        <span className="font">
                            {statisticsData.key_number}
                        </span>
                    </Card>
                </Col>
                <Col span={6}>
                    <Card title="智能回复时长（分钟）">
                        <span className="font">
                            {(statisticsData.key_number * 4.35).toFixed(2)}
                        </span>
                    </Card>
                </Col>
                <Col span={6}>
                    <Card title="智能回复平均时长（分钟）">
                        <span className="font">{4.35}</span>
                    </Card>
                </Col>
                <Col span={6}>
                    <Card title="合计回复数量">
                        <span className="font">
                            {statisticsData.key_number +
                                statisticsData.user_number}
                        </span>
                    </Card>
                </Col>
            </Row>
            <Row gutter={[16, 16]}>
                <Col span={6}>
                    <Card title="人工回复数量">
                        <span className="font">
                            {statisticsData.user_number}
                        </span>
                    </Card>
                </Col>
                <Col span={6}>
                    <Card title="人工回复时长（分钟）">
                        <span className="font">
                            {(statisticsData.user_number * 13.37).toFixed(2)}
                        </span>
                    </Card>
                </Col>
                <Col span={6}>
                    <Card title="人工回复平均时长（分钟）">
                        <span className="font">13.37</span>
                    </Card>
                </Col>
                <Col span={6}>
                    <Card title="合计回复时长">
                        <span className="font">
                            {(
                                Number(
                                    (statisticsData.user_number * 13.37).toFixed(
                                        2,
                                    ),
                                ) +
                                Number(
                                    (statisticsData.key_number * 4.35).toFixed(
                                        2,
                                    ),
                                )
                            ).toFixed(2)}
                        </span>
                    </Card>
                </Col>
            </Row>
            <h3>
                选择时间：
                <RangePicker
                    ranges={{
                        今天: [moment(), moment()],
                        本月: [
                            moment().startOf('month'),
                            moment().endOf('month'),
                        ],
                    }}
                    locale={locale}
                    format="YYYY-MM-DD"
                    onChange={(dates, string) => {
                        console.log(dates);
                        console.log(string);
                        if (dates) {
                            request(`${host}/v1.0/api/index/statistics`, {
                                method: 'get',
                                params: {
                                    start: string[0],
                                    end: string[1],
                                },
                            }).then((res) => {
                                if (res.code == 200) {
                                    setStatisticsData({
                                        user_number: res.data.user_number,
                                        key_number: res.data.key_number,
                                        list: res.data.list,
                                    });
                                }
                            });
                        }
                    }}
                />
            </h3>

            <Column {...config} />
        </div>
    );
};

export default Statistics;
